已經到了鐵人賽的尾聲了，所以今天要來整理一些使用頻率較高的屬性。
檢視結果會隨著設定值而產生明顯差異，最好逐一確認清楚。

• 文字及文章的裝飾

  屬性	用途	值

  font-size|設定文字大小|數值：數值後要加上 px、rem、% 等單位 / 關鍵字：可以設定 xx-small、small、medium、large、x-large、xx-large 等七個等級，medium 是標準尺寸
  font-family|設定字體種類|字型名稱：描述字型的名稱。假如含有中文名稱或名稱內有空格時，要用單引號「'」或雙引號「"」包夾字型名稱 / 關鍵字：可以設定 sans-serif(黑體)、serif(明體)、cursive(手寫體)、fantasy(裝飾體)、monospace(等寬字體)等
  font-weight|設定文字粗細|關鍵字：normal(標準)、bold(粗體)、lighter(較細)、bolder(較粗) / 數值：可設定 1~1000 之間的任意數值
  line-height|設定行高|normal：顯示瀏覽器判斷的行高 / 數值(無單位)：按照與字型大小的比例來設定 / 數值(有單位)：可使用 px、em、% 等單位設定數值
  text-align|設定對齊文字的位置|left：靠左對齊、right：靠右對齊、center：置中對齊、justify：左右對齊
  text-decoration|在文字上設定底線、刪除線等裝飾|none：無裝飾、underline：底線、overline：上線、line-through：刪除線、blink：閃爍
  letter-spacing|設定字距|normal：標準字距 / 數值：數值後要加上 px、rem、% 等單位
  color|文字上色|色碼：要設定以 # 為開頭的 3 位數或 6 位數的色碼 / 顏色名稱：設定 red、blue 等既定的顏色名稱 / RGB 值：以「rgb」為開頭，用逗號「,」分隔紅、綠、藍的數值。如果顏色包含不透明度，則以「rgba」為開頭，用逗號「,」分隔紅、綠、藍、不透明度的值。不透明度的值介於 0~1 之間。
  font|統一設定所有與文字相關的屬性|設定 font-style、font-variant、font-weight、font-size、font-height、font-family 等設定值

• 背景的裝飾

  屬性	用途	值

  background-color|設定背景色|色碼：設定以 # 為開頭的 3 位數或 6 位數的色碼 / 顏色名稱：設定 red、blue 等既定的顏色名稱 / RGB 值：以「rgb」為開頭，用逗號「,」分隔紅、綠、藍的數值。如果顏色包含不透明度，則以「rgba」為開頭，用逗號「,」分隔紅、綠、藍、不透明度的值。不透明度的值介於 0~1 之間。
  background-image|設定背景影像|url：設定影像檔案 / none：不使用背景影像
  background-repeat|設定重複顯示背景影像的方式|repeat：往垂直、水平方向重複顯示 / repeat-x：往水平方向重複顯示 / repeat-y：往垂直方向重複顯示 / no-repeat：不重複顯示
  background-size|設定背景影像的大小|數值：數值後要加上 px、rem、% 等單位 / 關鍵字：用 cover、contain 設定
  background-position|設定顯示背景影像的位置|數值：數值後要加上 px、rem、% 等單位 / 關鍵字：水平方向為 left(左)、center(中央)、right(右)；垂直方向為 top(上)、center(中央)、bottom(下)
  background|統一設定所有與背景相關的屬性|設定 background-color、background-image、background-repeat、background-size、background-position 的值

• 寬度與高度

  屬性	用途	值

  width|設定寬度|數值：數值後要加上 px、rem、% 等單位 / auto：根據相關的屬性值自動設定
  height|設定高度|數值：數值後要加上 px、rem、% 等單位 / auto：根據相關的屬性值自動設定

• 留白

  屬性	用途	值

  margin|元素外側的留白。用半形空格分隔，依照上、右、下、左(順時針)的順序設定|數值：數值後要加上 px、rem、% 等單位 / auto：根據相關的屬性值自動設定
  padding|元素內側的留白。用半形空格分隔，依照上、右、下、左(順時針)的順序設定|數值：數值後要加上 px、rem、% 等單位 / auto：根據相關的屬性值自動設定

• 線條

  屬性	用途	值

  border-width|設定線條粗細|數值：數值後要加上 px、rem、% 等單位 / 關鍵字：thin(細線)、medium(一般)、thick(粗線)
  border-style|設定線條種類|none：不顯示線條、solid：單實線、double：雙實線、dashed：虛線、dotted：點線、groove：立體凹線、ridge：立體凸線、inset：被包圍的部分看起來凹陷的嵌入線、outset：被包圍的部分看起來浮凸的浮出線
  border-color|設定線條的顏色|色碼：設定以 # 為開頭的 3 位數或 6 位數的色碼 / 顏色名稱：設定 red、blue 等既定的顏色名稱
  border|統一設定線條顏色、樣式、粗細|設定 border-width、border-style、border-color 的值

• 清單項目

  屬性	用途	值

  list-style-type|設定清單符號的種類|lower-roman：小寫羅馬數字、upper-roman：大寫羅馬數字、lower-alpha：小寫英文字母、upper-alpha：大寫英文字母等種類
  list-style-position|設定清單符號的顯示位置|outside：顯示在方塊的外側 / inside：顯示在方塊的內側
  list-style-image|設定清單符號使用的影像|url：影像檔案的 URL / none：沒有設定
  list-style|統一設定清單符號的種類、位置、影像|list-style-type、list-style-position、list-style-image 的值

• 排版(Flexbox)

  屬性	用途	值

  display|使用 Flexbox 排列子元素|flex
  flex-direction|設定子元素的排列方向|row(預設值)：由左往右排列子元素 / row-reverse：由右往左排列子元素 / column：由上往下排列子元素 / column-reverse：由下往上排列子元素
  flex-wrap|設定子元素的換行方式|nowrap(預設值)：子元素不換行，排列成一行 / wrap：子元素換行，由上往下排列多行 / wrap-reverse：子元素換行，由下往上排列多行
  justify-content|設定水平方向的對齊方式|flex-start(預設值)：從每行起始位置開始排列，靠左對齊 / flex-end：從行尾開始對齊，靠右對齊 / center：置中對齊 / space-between：把最初與最後的元素放在左右兩端，並按照均等的間隔排列其他元素 / space-around：包含左右兩端的子元素在內，以均等的間隔排列
  align-items|設應垂直方向的對齊方式|stretch(預設值)：根據父元素的高度或內容最多的子元素高度來擴大排列 / flex-start：從父元素的起始位置開始排列，靠上對齊 / flex-end：從父元素的終點開始排列，靠下對齊 / center：置中對齊 / baseline：對齊基線
  align-content|設定變成多行的對齊方式|stretch(預設值)：根據父元素的高度擴大排列 / flex-start：從父元素的起始位置開始排列，靠上對齊 / flex-end：從父元素的終點開始排列，靠下對齊 / space-between：把最初與最後的元素放在上下兩端，並按照均等的間隔排列其他元素 / space-around：包含上下兩端的子元素在內，以均等的間隔排列

• 排版(CSS 格線)

  屬性	用途	值

  display|使用 CSS 格線排列子元素|grid
  grid-template-columns|設定子元素的寬度|數值：數值後要加上「px」、「rem」、「%」、「fr」等單位
  grid-template-rows|設定子元素的高度|數值：數值後要加上「px」、「rem」、「%」、「fr」等單位
  gird-gap|設定子元素之間的留白|數值：數值後要加上「px」、「rem」、「%」、「fr」等單位

今天的內容就有如[Day16]整理常用的 HTML 屬性一樣，是在整理常用的 CSS 屬性，
雖然表格看起來很多，但其實也都是在為前面的內容做一個統整，
希望看到今天的內容都可以幫上許多忙：）

那麼我是沒魚，這是我的第二十九天，距離完賽就只剩下明天而已了！

<上一篇> [Day28]重置網頁的 CSS 設定
<下一篇> [Day30]完賽心得與結語